<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页轮播图</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css"  media="all">

</head>
<body>

<!-- 修改的form表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">图片标题</label>
        <div class="layui-input-inline">
            <input type="text" name="bannerName" placeholder="图片标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传图片</label>
            <button type="button" class="layui-btn" id="updateImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="state" value="1" title="先上传暂不显示" checked>
            <input type="radio" name="state" value="2" title="上传并显示">
            <input type="radio" name="state" value="0" title="已删除">
                        <input type="hidden" name="imgUrl">
                        <input type="hidden" name="state">
                        <input type="hidden" name="id">
<!--                        <input type="hidden" name="date">-->
        </div>
    </div>

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">上传日期</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <input type="text" name="date" placeholder="请输入上传日期" autocomplete="off" class="layui-input" id="date2">-->
<!--            <input type="hidden" name="imgUrl">-->
<!--            <input type="hidden" name="state">-->
<!--            <input type="hidden" name="bannerId">-->
<!--        </div>-->
<!--    </div>-->

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入图片描述" class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">提交修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">图片标题</label>
        <div class="layui-input-inline">
            <input type="text" name="bannerName" placeholder="图片标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传图片</label>
            <button type="button" class="layui-btn" id="uploadFile">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="state" value="1" title="先上传暂不显示" checked>
            <input type="radio" name="state" value="2" title="上传并显示">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传日期</label>
        <div class="layui-input-inline">
            <input type="text" name="date" placeholder="请输入上传日期" autocomplete="off" class="layui-input" id="date">
            <input type="hidden" name="imgUrl">
            <input type="hidden" name="state">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入图片描述" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">提交添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/html" id="img">
    <img src="./cmfz/{{d.imgUrl}}" style="height: 50px"/>
</script>
<script type="text/html" id="status">
    {{#  if(d.state == 0){ }}
    已删除
    {{#  } else if(d.state == 1) {   }}
    已上传未展示
    {{#  } else {   }}
    展示中
    {{#  }          }}
</script>
<!--工具栏-->
<table id="bannerTable" lay-filter="bannerTableFilter"></table>
<script type="text/html" id="tb1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="tb2">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">批量删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="add">添加图片</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'layer','upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layer = layui.layer;
        laydate.render({
            elem: '#date',
            trigger: 'click'//呼出事件改成click
        });

        laydate.render({
            elem: '#date2',
            trigger: 'click'//呼出事件改成click
        });

        table.render({
            elem: '#bannerTable',
            url: 'banner/show',
            page: true,
            limit: 5,
            limits: [5, 7,15],
            toolbar: '#tb2',
            cols: [[
                {type: 'checkbox'}
                , {title: '缩略图', templet:'#img'}
                , {title: '编号', field: 'id'}
                , {title: '标题', field: 'bannerName'}
                , {title: '上传时间', field: 'date'}
                , {title: '状态', templet:'#status'}
                , {title: '描述', field:'desc'}
                , {title: '操作', toolbar: '#tb1'}
            ]]
        });

        // 添加前上传
        upload.render({
            elem:'#uploadFile'
            // ,accept: 'audio' //只允许上传音频文件
            ,url:'banner/upload'
            ,done:function (res) {
                form.val('addFormFilter',{
                    imgUrl:res.imgUrl,
                });
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 模糊查询
        $('#search').click(function () {
            table.reload('bannerTable',{
                where:{
                    bannerName:$('#searchName').val()
                },
                page:{
                    curr:1
                }
            });
        });

        // 批量删除
        table.on('toolbar(bannerTableFilter)',function (obj) {
            var status = table.checkStatus(obj.config.id);
            if (obj.event == 'add'){
                layer.open({
                    type:1,
                    content: $('#addForm'),
                    title:'添加图片'
                })

            }else if (obj.event == 'del'){
                var data = status.data;
                if (data.length == 0){
                    layer.msg('请至少勾选一项！');
                    return;
                }else {
                    var ids = [];
                    for (var i = 0; i<data.length; i++){
                        ids.push(data[i].id);
                    }
                }

                $.ajax({
                    url: 'banner/delete',
                    dataType: 'json',
                    data: 'id=' + ids,
                    success:function (result) {
                        if (result.isDelete){
                            layer.msg('删除成功！');
                            table.reload('bannerTable');
                        }else {
                            layer.msg('删除失败！');
                            table.reload('bannerTable');
                        }
                    }
                })
            }
        })

        // 增加图片
        form.on('submit(addSubmit)',function () {
            $.ajax({
                url:'banner/add',
                dataType:'json',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if (result.isAdd){
                        layer.closeAll();
                        layer.msg('添加成功！');
                        table.reload('bannerTable');
                        $("#addForm")[0].reset();
                    }else {
                        layer.closeAll();
                        layer.msg('添加失败！');
                        table.reload('bannerTable');
                        $("#addForm")[0].reset();
                    }
                }
            })
            return false;
        });

        // 绑定单个删除事件

        table.on('tool(bannerTableFilter)', function (obj) {
            var data = obj.data;
            var id = obj.data.id;
            console.log(obj);
            if (obj.event == 'del') {
                layer.confirm('确认要删除？', function (index) {
                    $.ajax({
                        url: 'banner/delete',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isDelete) {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功！");
                            } else {
                                layer.close(index);
                                layer.msg("删除失败！");
                            }
                        }
                    });
                });
            }else if (obj.event == 'edit'){
                $.ajax({
                    url: 'banner/showOne',
                    dataType: 'json',
                    data: 'id=' + id,
                    success: function (result) {
                        form.val('updateFormFilter', {
                            id:result.id,
                            bannerName: result.bannerName,
                            imgUrl:result.imgUrl,
                            state: result.state,
                            date: result.date,
                            desc :result.desc

                        })
                    }
                });
                // 弹出修改表单
                layer.open({
                    type:1
                    ,content: $('#updateForm')
                    ,title:'编辑图片信息'
                })
            }
        });

        // 修改前上传
        upload.render({
            elem:'#updateImg'
            ,url:'banner/upload'
            ,done:function (res) {
                form.val('updateFormFilter',{
                    imgUrl:res.imgUrl
                })
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 修改
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                url: 'banner/update',
                data: $("#updateForm").serialize(),
                dataType: 'json',
                success: function (result) {
                    if (result.isUpdate) {
                        console.log('修改成功');
                        layer.msg('修改成功！');
                        $("#updateForm")[0].reset();
                        table.reload('bannerTable');
                        layer.closeAll();
                    }else {
                        console.log('修改失败');
                        layer.msg('修改失败！');
                        $("#updateForm")[0].reset();
                        layer.closeAll();
                        table.reload('bannerTable');
                    }
                }
            });
        });

    });
</script>
</body>
</html>